<template>
  <div class="feedback-management-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" class="search-form">
        <el-form-item label="联系方式类型">
          <el-select v-model="searchForm.contactType" placeholder="请选择类型">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="邮箱" value="email"></el-option>
            <el-option label="电话" value="phone"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="searchForm.contactInfo" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
      <el-table-column prop="feedbackText" label="反馈内容" min-width="300" show-overflow-tooltip></el-table-column>
      <el-table-column label="联系方式类型" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.contactType === 'email' ? 'primary' : 'success'">
            {{ scope.row.contactType === 'email' ? '邮箱' : '电话' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="contactInfo" label="联系方式" width="200" align="center"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import http from '@/http/http'

export default {
  name: 'FeedbackManagement',
  data() {
    return {
      searchForm: {
        contactType: null,
        contactInfo: null
      },
      tableData: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const params = {
          page: this.page,
          size: this.pageSize,
          ...this.searchForm
        }
        const res = await http.feedback.getList(params)
        if (res.data.code === 200) {
          const { records, total, size, current } = res.data.data
          this.tableData = records
          this.total = total
          this.pageSize = size
          this.page = current
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },

    handleSearch() {
      this.page = 1
      this.fetchData()
    },

    resetSearch() {
      this.searchForm = {
        contactType: null,
        contactInfo: null
      }
      this.page = 1
      this.fetchData()
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },

    handleCurrentChange(val) {
      this.page = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.feedback-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.search-bar {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.pagination-container {
  background-color: #fff;
  padding: 15px;
  margin-top: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.el-table {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
</style> 